<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片识别系统</title>


</head>
<body>

<div id="app">

</div>

<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    const app = Vue.createApp({
        template: `
          <div id="app" class="table-container">
          <table align="center" border="1px solid #ccc" cellspacing="1" cellpadding="1">
            <thead>
            <tr>

              <th>图片名称</th>

              <th>图片识别结果</th>
              <th>操作</th> <!-- 添加一个额外的列 -->
            </tr>
            </thead>
            <tbody>
            <tr v-for="re in res" :key="re.name">

              <td>{{ re.name }}</td>
              <td>{{ re.result }}</td>
              <td> <!-- 添加一个删除按钮 -->
                <button @click="deleteUser(re)">删除</button>
              </td>
            </tr>
            </tbody>
          </table>
          </div>
        `,
        data() {
            return {
                res: []
            }
        },

        mounted() {
            this.list()
        },
        methods: {
            deleteUser(re) { // 删除用户方法
                axios.get("/log/delete/"+re.name).then(response => {
                    console.log("删除的结果：", response)
                    this.list();
                }).catch(error => {
                    console.log(error)
                })
            },
            list() {
                axios.get('/log/list').then(response => {
                    this.res = response.data.data
                }).catch(error => {
                    console.log(error)
                })
            }
        }
    });

    app.mount('#app');
</script>
</body>
</html>
